<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        success: '#10b981',
                        danger: '#ef4444',
                        warning: '#f59e0b',
                        info: '#06b6d4',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
        }
    </style>
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md py-4 px-6">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-users text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">用户管理系统</h1>
            </div>
            <div class="flex items-center space-x-4">
                <a href="/data-jpa/swagger-ui.html" target="_blank" class="text-primary hover:text-primary/80 transition-colors">
                    <i class="fa fa-book mr-1"></i> API文档
                </a>
                <button id="theme-toggle" class="text-gray-500 hover:text-gray-700 transition-colors">
                    <i class="fa fa-moon-o"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow px-4 py-8">
        <div class="max-w-7xl mx-auto">
            <!-- 统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-lg p-6 card-shadow hover-scale">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">总用户数</p>
                            <h3 id="total-users" class="text-3xl font-bold text-gray-800 mt-1">0</h3>
                        </div>
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                            <i class="fa fa-user-circle text-primary text-2xl"></i>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-6 card-shadow hover-scale">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">今日新增</p>
                            <h3 id="new-users" class="text-3xl font-bold text-gray-800 mt-1">0</h3>
                        </div>
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                            <i class="fa fa-user-plus text-success text-2xl"></i>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-6 card-shadow hover-scale">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">活跃用户</p>
                            <h3 id="active-users" class="text-3xl font-bold text-gray-800 mt-1">0</h3>
                        </div>
                        <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                            <i class="fa fa-user-check text-purple-500 text-2xl"></i>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-6 card-shadow hover-scale">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">操作成功率</p>
                            <h3 id="success-rate" class="text-3xl font-bold text-gray-800 mt-1">0%</h3>
                        </div>
                        <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
                            <i class="fa fa-chart-line text-amber-500 text-2xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮和搜索 -->
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                <button id="add-user-btn" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg transition-all flex items-center shadow-md hover:shadow-lg">
                    <i class="fa fa-plus-circle mr-2"></i>
                    添加用户
                </button>
                <div class="relative w-full md:w-64">
                    <input type="text" id="search-input" placeholder="搜索用户名或邮箱..." 
                           class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>

            <!-- 用户列表表格 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    ID
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    用户名
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    邮箱
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    姓名
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    创建时间
                                </th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody id="user-table-body" class="bg-white divide-y divide-gray-200">
                            <!-- 用户数据将通过JavaScript动态生成 -->
                            <tr class="animate-pulse">
                                <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                                    <i class="fa fa-spinner fa-spin mr-2"></i> 加载用户数据中...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 分页控件 -->
            <div class="flex justify-between items-center">
                <div class="text-sm text-gray-500">
                    显示 <span id="showing-start">0</span>-<span id="showing-end">0</span> 条，共 <span id="total-items">0</span> 条
                </div>
                <div class="flex items-center space-x-2">
                    <button id="prev-page" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button class="px-3 py-1 rounded bg-primary text-white">1</button>
                    <button id="next-page" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fa fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6 px-4">
        <div class="max-w-7xl mx-auto text-center text-gray-500 text-sm">
            <p>© 2025 用户管理系统 - Spring Boot Data JPA 示例</p>
        </div>
    </footer>

    <!-- 添加/编辑用户模态框 -->
    <div id="user-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 transform transition-all scale-95 opacity-0" id="modal-content">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 id="modal-title" class="text-lg font-semibold text-gray-900">添加用户</h3>
                    <button id="close-modal" class="text-gray-400 hover:text-gray-500 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <form id="user-form" class="p-6">
                <input type="hidden" id="user-id">
                <div class="space-y-4">
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名 <span class="text-danger">*</span></label>
                        <input type="text" id="username" name="username" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码 <span class="text-danger">*</span></label>
                        <input type="password" id="password" name="password" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱 <span class="text-danger">*</span></label>
                        <input type="email" id="email" name="email" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    </div>
                    <div>
                        <label for="fullName" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <input type="text" id="fullName" name="fullName"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    </div>
                </div>
                <div class="mt-6 flex justify-end space-x-3">
                    <button type="button" id="cancel-modal" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow-sm hover:shadow">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="confirm-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-sm mx-4">
            <div class="p-6">
                <div class="text-center mb-4">
                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-exclamation-triangle text-danger text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">确认删除</h3>
                    <p class="text-gray-500" id="confirm-message">您确定要删除此用户吗？此操作不可撤销。</p>
                </div>
                <div class="flex justify-center space-x-3">
                    <button id="cancel-delete" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button id="confirm-delete" class="px-4 py-2 bg-danger text-white rounded-md hover:bg-danger/90 transition-colors shadow-sm hover:shadow">
                        确认删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-all duration-300 z-50 bg-white">
        <div class="flex items-center">
            <i id="notification-icon" class="fa fa-check-circle text-success mr-3"></i>
            <p id="notification-message" class="text-gray-800"></p>
        </div>
    </div>

    <!-- 全局加载指示器 -->
    <div id="global-loading" class="fixed inset-0 bg-white bg-opacity-80 flex items-center justify-center z-50 hidden">
        <div class="bg-white p-6 rounded-lg shadow-lg flex flex-col items-center">
            <div class="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin mb-4"></div>
            <p class="text-gray-700 loading-dots">正在加载</p>
        </div>
    </div>

    <!-- 核心业务逻辑 -->
    <script type="module" src="js/main.js"></script>
</body>
</html>